<template>
 <el-table border :data="tableData.data" style="width: 80%">
    <el-table-column v-for="item in tableTitle" :label="item.name" :prop="item.key" />
    <el-table-column label="操作" align="center" min-width = '120'>
      <template #default="scope">
        <el-button v-if="updateState" size="small" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button v-if="deleteState" size="small"
          type="danger"  @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
        <slot :row = "scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :current-page="tableData.nowPage"
      :page-count="tableData.maxPage"
      layout="prev, pager, next, jumper"
      @update:current-page="handleCurrentChange"
    />
</template>

<script setup lang='ts'>
import { ElMessage, ElMessageBox } from 'element-plus'

const emits = defineEmits(['getTableData', 'updateTable', 'deleteTable'])

const propsName = defineProps({
  updateState: {
    type: Boolean,
    default:true
  },
  deleteState: {
    type: Boolean,
    default:true
  },
  tableData: {
    type: Object,
    default: {}
  },
  tableTitle : {
    type: Array as any,
    default:[]
  }
})

interface User {
  date: string
  name: string
  address: string
}
const handleEdit = (index: number, row: User) => {
  emits('updateTable',row)
}
const handleDelete = (index: number, row: User) => {
  ElMessageBox.confirm(
    '是否要删除这条数据?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      emits('deleteTable',row)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const handleCurrentChange = (val: number) => {
  emits('getTableData',val)
}

</script>
<style scoped>

.el-table{
  margin: 30px auto;
}
.el-pagination{
  justify-content: center;

}
</style>
